<template>
	<div v-loading="loading">
		<div class="content-top">
			<span class="h1">系统管理</span>
			<span class="h2">系统管理</span>
		</div>
		<div class="con">
			<div class="search clearfix" style="margin-top: 10px;">
				<el-button type="primary" @click="addBanner()">新建banner</el-button>
			</div>
			<div style="margin-top: 10px;padding-bottom: 100px;overflow: auto">
				<el-table ref="tableData" :data="tableData" highlight-current-row style="width: 100%">
					<el-table-column type="index" width="60">
					</el-table-column>
					<el-table-column prop="OrderInt" label="序号">
					</el-table-column>
					<el-table-column prop="IMGUrl" label="地址">
					</el-table-column>
					<el-table-column prop="address" label="操作" width="230">
						<template slot-scope="scope">
							<el-button size="small" type="primary" @click="read(scope.row.IMGUrl)">查看</el-button>
							<el-button size="small" type="danger" @click="delBanner(scope.row.ID)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="pages">
					<el-pagination small :current-page="index" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background prev-text='上一页' next-text='下一页'>
					</el-pagination>
				</div>
			</div>
		</div>
		<!--上传图片-->
		<el-dialog title="上传图片" :visible.sync="mark4" :before-close="handleClose" width="500px">
			<div>
				<el-form label-width="60px">
					<el-form-item label="序号：">
						<el-input-number v-model="orderInt" :min="0" :max="99999" label="描述文字"></el-input-number>
					</el-form-item>
				</el-form>
				<el-upload class="upload-demo" ref="upload" :limit="limitnum" :on-change="handleChange" :action='fileUrl' :on-preview="handlePreview" :onSuccess="uploadSuccess" :onError="uploadError" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
					<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传文件</el-button>
					<img :src="imgUrl" class="bannerimg" v-if="imgUrl"/>
				</el-upload>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="quxia()">取 消</el-button>
				<el-button type="primary" @click="fnUpload()">上传</el-button>
			</span>
		</el-dialog>
		<el-dialog title="图片查看" :visible.sync="mark5" :before-close="handleClose" width="500px">
			<img :src="imgUl"  class="bannerimgs"/>
			<span slot="footer" class="dialog-footer">
				<el-button @click="quxia()">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import api from '../../../api/api'
	export default {
		name: 'banner',
		data() {
			return {
				index:1,
				mark5:false,
				imgUl:'',
				loading:true,
				orderInt:0,
				limitnum:1,
				imgUrl:'',
				fileUrl:'',
				mark4:false,
				fileList: [],
				tableData: [], //banner
				imgs:'',
				total: 1,
			}
		},
		created() {
			this.fileUrl = api.files
			this.getbannerlist()
		},
		methods: {
			//翻页
			handleCurrentChange(val){
				this.loading=true
				this.index = val
				this.$axios.post(api.getbannerlist, {
					"Para": "",
					"PageSize": 10,
					"PageIndex": this.index - 1,
					"OrderbyString": ""
				}).then(res => {
					if(res.data.isOK) {
						this.loading = false
						this.tableData = res.data.data.Data
						this.total = res.data.data.Items?res.data.data.Items:1
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			handleClose(){
				this.quxia()
			},
			//隐藏
			quxia(){
				this.mark5 = false
				this.mark4 = false
			},
			//获取banner
			getbannerlist() {
				this.$axios.post(api.getbannerlist, {
					"Para": "",
					"PageSize": 10,
					"PageIndex": this.index-1,
					"OrderbyString": ""
				}).then(res => {
					if(res.data.isOK) {
						this.loading = false
						this.tableData = res.data.data.Data
						this.total = res.data.data.Items?res.data.data.Items:1
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			submitUpload() {
				this.fileUrl = api.files
		        this.$refs.upload.submit();
		    },
		    uploadSuccess(response, file, fileList){
		    	this.$message({
					message: '上传成功',
					type: 'success'
				});
		    	this.imgs = response.data.filePaht.substring(2, response.data.filePaht.length)
		    },
		    uploadError (response, file, fileList){
		    },
		    handleRemove(file, fileList) {
		    },
		    handlePreview(file) {
		    },
		    handleChange(file, fileList){
		    	this.imgUrl = file.url
		    },
			//新增
			addBanner() {
				this.fileList = [],
				this.imgUrl = '',
				this.orderInt = 0
				this.mark4 = true
			},
			//上传
			fnUpload(){
				if(this.imgs == ''){
					this.$message.error('图片上传地址不能为空');
					return;
				}
				this.loading = true;
				this.$axios.post(api.addbanner,{
					"OrderInt":this.orderInt,
  					"IMGUrl": this.imgs 
				})
				.then(res => {
					if(res.data.isOK) {
						this.loading = false
						this.mark4 = false
						this.getbannerlist()
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			//删除
			delBanner(id){
				this.loading = true
				this.$axios.get(api.delbanner+'/'+id)
				.then(res => {
					if(res.data.isOK) {
						this.loading = false
						this.getbannerlist()
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			//查看
			read(urls){
				this.mark5 = true
				this.imgUl = api.host + urls
			}
		}
	}
</script>

<style scoped>
	.bannerimg{
		margin-top: 20px;
		display: block;
		width: 300px;
	}
	.bannerimgs{
		margin-top: 20px;
		display: block;
		width: 300px;
		margin: auto;
	}
</style>